<template>
	<div class="app-container">
		<el-card shadow="always">
			<div style="display: flex">
				<div class="demo-type" style="margin-top: 10px; margin-left: 10px">
					<el-avatar :size="60" :src="form.avatar">
						<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
					</el-avatar>
				</div>
				<el-row :gutter="20" style="flex: 1">
					<el-col :span="6">
						<div class="info">
							<span class="infoLab">用户ID：</span><span class="infoContent">{{ form.id }}</span>
						</div>
						<div class="info">
							<span class="infoLab">手机号：</span><span class="infoContent">{{ form.mobile }}</span>
						</div>
						<div class="info">
							<span class="infoLab">邀请码：</span><span class="infoContent">{{ form.referrerUuid }}</span>
						</div>
						<div class="info">
							<span class="infoLab">团长：</span><span class="infoContent">{{ form.headType }}</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="info">
							<span class="infoLab">现金积分：</span><span class="infoContent">{{ form.cashIntegral }}</span>
						</div>
						<div class="info">
							<span class="infoLab">购物积分：</span><span class="infoContent">{{ form.buyIntegral }}</span>
						</div>
						<div class="info">
							<span class="infoLab">余额：</span><span class="infoContent">{{ form.balance }}</span>
						</div>
						<div class="info">
							<span class="infoLab">收益：</span><span class="infoContent">{{ form.userIncome }}</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="info">
							<span class="infoLab">拼团券：</span><span class="infoContent">{{ form.groupRoll }}</span>
						</div>
						<div class="info">
							<span class="infoLab">现金券：</span><span class="infoContent">{{ form.cashRoll }}</span>
						</div>
						<div class="info">
							<span class="infoLab">用户类型：</span><span class="infoContent">{{ form.userLevel }}</span>
						</div>
						<div class="info">
							<span class="infoLab">创建时间：</span><span class="infoContent">{{ form.createTime }}</span>
						</div>
					</el-col>
					<el-col :span="6">
						<div>
							<span>最后登录：</span><span>{{ form.lastLoginTime }}</span>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script>
import { getUserInfo } from '@/api/mall/user';

export default {
	name: 'User',
	components: {},
	data() {
		return {
			id: null,
			loading: false,
			form: {},
			// 表单校验
		};
	},
	created() {
		let id = this.$route.query.id;
		this.id = id;
		this.getDetail();
		// this.getList();
	},
	methods: {
		getDetail() {
			getUserInfo({ id: this.id }).then((res) => {
				this.form = res.data;
			});
		},
		getList() {
			this.loading = true;
			listUser(this.queryParams).then((response) => {
				console.log(response);
				this.userList = response.data.records;
				this.total = response.data.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				username: null,
				password: null,
				twoPassword: null,
				mobile: null,
				gender: null,
				birthday: null,
				lastLoginTime: null,
				lastLoginIp: null,
				userLevel: null,
				nickname: null,
				mobile: null,
				avatar: null,
				weixinOpenid: null,
				sessionKey: null,
				status: 0,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加用户';
		},
		/** 编辑按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			getUser(id).then((response) => {
				this.form = response.data;
				this.open = true;
				this.title = '编辑用户';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					let obj = {
						mobile: this.form.mobile,
						password: this.form.password,
					};
					if (this.form.password.length < 6) {
						this.$message.error('密码不能小于6位数!');
						return;
					}
					if (this.form.mobile.length != 11) {
						this.$message.error('电话号码格式有误!');
						return;
					}
					if (this.form.password != this.form.twoPassword) {
						this.$message.error('2次密码输入不一致!');
						return;
					}
					if (this.form.id != null) {
						updateUser(this.form).then((response) => {
							this.msgSuccess('编辑成功');
							this.open = false;
							this.getList();
						});
					} else {
						addUser(obj).then((response) => {
							this.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id ? [row.id] : this.ids;
			this.$confirm('是否确认删除用户编号为"' + ids + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delUser(ids);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有用户数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return exportUser(queryParams);
				})
				.then((response) => {
					this.download(response.msg);
				});
		},
	},
};
</script>
<style scoped lang="scss">
.info {
	display: flex;
	align-items: center;
	height: 40px;
	line-height: 40px;
}
.infoLab {
	width: 100px;
	text-align: right;
}
.infoContent {
	padding-left: 5px;
}
</style>
